<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>系统菜单管理</title>
    <${r'#'}include "/include/layui-top.html">
    <style>
    body{
    	overflow-y:scroll!important;
    }
    </style>
</head>
<body class="layui-layout-body" style="padding: 10px">
<div class="layui-btn-group">
	<button type="button" class="layui-btn" onclick="reload();">刷新</button>
	<button type="button" class="layui-btn" onclick="add();">新增一级菜单</button>
	<a class="layui-btn" lay-href="http://www.layui.com/doc/element/icon.html">内置图标</a>
</div>
<span class="layui-badge layui-bg-orange">
	<a href="http://www.iconfont.cn/" target="_blank">阿里巴巴 iconfont</a>
</span>
<div>
    <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>
<${r'#'}include "/include/layui-end.html">
<script>
	var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null,$=null;
    layui.config({
        base: '/components/layuiadmin/'
    }).extend({
    	treeGrid:'layui/extend/treeGrid',
        index: 'lib/index'
    }).use(['jquery','index','treeGrid','layer'], function(){
        $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,idField:'menuId'
            ,url:'/boss/get-tree-grid'
            ,cellMinWidth: 100
            ,treeId:'menuId'//树形id字段名称
            ,treeUpId:'parentId'//树形父id字段名称
            ,treeShowName:'menuName'//以树形式显示的字段
           	,cols: [[
           		   {field:'menuId', edit:'text',width:50, title: 'ID'},
                   {field:'menuName', edit:'text',width:300, title: '菜单名称'},
                   {field:'menuIcon',edit:'text',width:200, title: '图标样式'},
                   {field:'menuUrl',edit:'text',width:500, title: '链接地址'},
                   {field:'sort',edit:'text', title: '排序'},
                   {width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
   	                    ,templet: function(d){
   	                    var html='';
   	                    var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
   	                    var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
   	                    return addBtn+delBtn;
   	                }
                   }
               ]]
            ,page:false
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="add"){//添加行
                add(obj.data);
            }
        });
        
        treeGrid.on('edit(treeTable)', function(obj){ 
			$.ajax({
			    type: 'POST',
			    url: '/boss/edit-tree-node',
			    data: {menuId : obj.data.menuId,
			    	menuName : obj.data.menuName,
			    	menuIcon : obj.data.menuIcon,
			    	sort : obj.data.sort,
			    	menuUrl : obj.data.menuUrl
			    	},
			    success: function (data) {
			        if(data.success){
			        	if($('#menu_'+data.data.menuId, parent.document).find('cite').html() == undefined){
			        		var menuUrl = data.data.menuUrl;
			        		var node2 = $('#menu_'+data.data.menuId, parent.document).find("a[lay-href]");
			        		$(node2).attr('lay-href',menuUrl==null?'javascript:;':menuUrl);
			        		$('#menu_'+data.data.menuId, parent.document).find("a[lay-href]").html(data.data.menuName)
			        	} else {
			        		var icons = $('#menu_'+data.data.menuId, parent.document).find('i.layui-icon');
			        		$(icons).attr('class','');
			        		$(icons).addClass('layui-icon');
			        		$(icons).addClass(data.data.menuIcon);
				        	$('#menu_'+data.data.menuId, parent.document).find('cite').html(data.data.menuName)
			        	}
			        	layer.msg(obj.field+'修改成功');
			        }else{
			            layer.msg(data.message,{icon: 5,anim: 6,time: 0,btn:['确定']});
			        }
			    },
			    error: function(data) {
			        layer.msg(data.responseText,{icon: 5,anim: 6,time: 0,btn:['确定']});
			    },
			    dataType: "json"
			});
       	});
    });
    
    function reload(){
    	treeGrid.reload("treeTable");
    }

    function del(obj) {
        layer.confirm("你确定删除菜单项目“"+obj.data.menuName+"”吗？", {icon: 3, title:'提示'},
            function(index){//确定回调
	        	$.ajax({
	                type: 'POST',
	                url: '/boss/del-tree-node',
	                data: {menuId:obj.data.menuId},
	                success: function (data) {
	                    if(data.success){
	                    	obj.del();
	                    	var node = $('#menu_'+obj.data.menuId, parent.document);
	                    	if($(node).parent().children().length == 1){
	                    		$(node).parent().remove()
	                    	} else {
	                    		$(node).remove();
	                    	}
	                        layer.close(index);
	                    }else{
	                        layer.msg(data.message,{icon: 5,anim: 6,time: 0,btn:['确定']});
	                    }
	                },
	                error: function(data) {
	                    layer.msg(data.responseText,{icon: 5,anim: 6,time: 0,btn:['确定']});
	                },
	                dataType: "json"
	            });
            },function (index) {//取消回调
               layer.close(index);
            }
        );
    }


  	//添加
    function add(pObj) {
    	var param={};
        param.parentId=pObj?pObj.menuId:0;
        $.ajax({
            type: 'POST',
            url: '/boss/add-tree-node',
            data: {parentId:param.parentId,menuName:'[新增菜单]',menuIcon:'layui-icon-app'},
            success: function (data) {
                if(data.success){
                	param.menuId=data.data.menuId;
                	param.menuName=data.data.menuName;
                	param.menuIcon=data.data.menuIcon;
                	treeGrid.addRow(tableId,pObj?pObj.LAY_TABLE_INDEX+1:0,param);
                	if(param.parentId == 0){
                		$('#LAY-system-side-menu', parent.document).append("<li id=\"menu_"+param.menuId+"\" class=\"layui-nav-item\">\n"+
                				"<a href=\"javascript:;\" lay-tips=\""+param.menuName+"\" lay-direction=\"2\">\n"+
                				"<i class=\"layui-icon layui-icon-app\"></i>\n"+
                				"<cite>"+param.menuName+"</cite>\n"+
                			"<span class=\"layui-nav-more\"></span></a>\n"+
                		"</li>");
                	} else {
                		$('#menu_'+param.parentId, parent.document).append("<dl class=\"layui-nav-child\">\n"+
                				"<dd id=\"menu_"+param.menuId+"\" data-name=\""+param.menuId+"\">\n"+
                				"<a lay-href=\"javascript:;\">"+param.menuName+"</a>\n"+
                			"</dd>\n"+
                		"</dl>\n");
                	}
                	$('#refresh-element', parent.document).trigger('click');
                	$("li[lay-attr='/boss/system-menu-page']", parent.document).trigger('click');
                }else{
                    layer.msg(data.message,{icon: 5,anim: 6,time: 0,btn:['确定']});
                }
            },
            error: function(data) {
                layer.msg(data.responseText,{icon: 5,anim: 6,time: 0,btn:['确定']});
            },
            dataType: "json"
        });
    }

</script>
</body>
</html>